

<template>
  <a-row class="page" :gutter="[18,0]">
<!--    <a-col :span="3" class="left">
      <a-input v-model:value="deptWord" style="margin-bottom: 8px" placeholder="请输入部门关键字">
        <template #prefix>
          <SearchOutlined />
        </template>
      </a-input>
      <a-tree
          block-node
          :fieldNames="{children:'children', title:'name', key:'id' }"
          @select="selectDept"
          :tree-data="treeDept"
      />
    </a-col>-->
    <a-col :span="24" class="right">
      <a-form layout="inline" :model="queryModel" v-if="searchBox">
        <a-form-item label="名称">
          <a-input v-model:value="queryModel.keyWord" placeholder="请输入岗位名称" />
        </a-form-item>
        <a-form-item label="状态" name="region">
          <a-select v-model:value="queryModel.status" placeholder="请选择岗位状态">
            <a-select-option :value="1">禁止</a-select-option>
            <a-select-option :value="0">正常</a-select-option>
          </a-select>
        </a-form-item>
        <a-space>
          <a-button type="primary" @click="getUsers">查询</a-button>
          <a-button @click="resetQuery">重置</a-button>
        </a-space>
      </a-form>
      <div class="functionBox">
        <a-space class="left">
          <a-button type="dashed" :icon="h(PlusOutlined)" @click="operator(0)">新增</a-button>
        </a-space>
        <a-space class="right">
          <a-button size="small" shape="circle" :icon="h(ReloadOutlined)" @click="getUsers()" />
          <a-button size="small" shape="circle" :icon="h(SearchOutlined)" @click="() => searchBox = !searchBox" />
        </a-space>
      </div>
      <div ref="basePoint" :style="`height: ${ windowHeight - elementToTopHight - 7 }px !important;`">
        <a-table
            :columns="columns"
            :data-source="tableData"
            :row-key="( record : User )=> record.id"
            :pagination="false"
            @resizeColumn="handleResizeColumn"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'properties'">
                <span>{{ record.properties ? record.properties.propertyName : '未分配物业' }}</span>
            </template>
            <template v-if="column.dataIndex === 'isActive'">
              <a-tag color="green" v-if="record.isActive == 0">正常</a-tag>
              <a-tag color="red" v-if="record.isActive == 1">禁止</a-tag>
            </template>
            <template v-if="column.dataIndex === 'action'">
              <a-dropdown>
                <a-button type="link">
                  更多操作
                  <DownOutlined />
                </a-button>
                <template #overlay>
                  <a-menu>
                    <a-menu-item @click="propertyAllocate(record)">
                        <DatabaseOutlined />
                        <span class="operationItem">分配物业</span>
                    </a-menu-item>
                    <a-divider class="divider" />
                    <a-menu-item @click="roleAllocate(record)">
                      <TeamOutlined />
                      <span class="operationItem">分配角色</span>
                    </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </template>
          </template>
        </a-table>
        <div class="pagination">
          <a-pagination
              size="small"
              :disabled="total == 0"
              :total="total"
              show-size-changer
              @change="pageChange"
              show-quick-jumper />
        </div>
      </div>
    </a-col>

    <a-modal
        title="分配物业"
        v-model:open="moduleStore.allocatePropertyOpen"
        :footer="null"
        @cancel="cancelAllocate"
    >
        <AllocateProperty v-if="moduleStore.allocatePropertyOpen" :user="moduleStore.userInfo" :open="moduleStore.allocatePropertyOpen" @sendPropertyId="acceptPropertyId" />
    </a-modal>

    <a-modal
        title="分配角色"
        v-model:open="moduleStore.roleOpen"
        width="1200px"
        :footer="null"
        @cancel="cancelAllocate"
    >
      <AllocateRole v-if="moduleStore.roleOpen" :user="moduleStore.userInfo" @sendUserRole="acceptUserRole"  />
    </a-modal>

    <a-modal
      title="添加用户"
      v-model:open="operatorStore.open"
      @ok="operatorSubmit"
      @cancel="resetFrom"
    >
      <a-form
          style="margin: 12px 0"
          :model="operatorStore.user"
          labelAlign="right"
          :label-col="{ style: { width: '80px' } }"
          :rules="rules"
          ref="formRef"
      >
        <a-row>
          <a-col :span="12">
            <a-form-item label="昵称" name="name">
              <a-input v-model:value="operatorStore.user.name" placeholder="请输入昵称" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="手机号" name="phoneNumber">
              <a-input v-model:value="operatorStore.user.phoneNumber" placeholder="请输入手机号" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>

  </a-row>
</template>

<script setup lang="ts">

    import { DownOutlined , DatabaseOutlined , TeamOutlined } from '@ant-design/icons-vue';
    import { h } from 'vue'
    import useUser from "@/hooks/useUser";
    import type { User } from "@/interface/User";
    const { basePoint , windowHeight , elementToTopHight } = DynamicHeight();
    import {
      PlusOutlined,
      ReloadOutlined,
      SearchOutlined
    } from '@ant-design/icons-vue';
    import DynamicHeight from "@/utils/DynamicHeight";
    import AllocateProperty from "@/components/System/AllocateProperty.vue";
    import AllocateRole from "@/components/System/AllocateRole.vue";


    const  {
      searchBox , queryModel ,
      getUsers , resetQuery , columns , tableData ,
      handleResizeColumn , propertyAllocate , moduleStore ,
      cancelAllocate , acceptPropertyId , roleAllocate ,
      acceptUserRole , pageChange , total , operatorStore ,
      operator , operatorSubmit , resetFrom  , formRef , rules
    } = useUser();




</script>

<style scoped lang="scss">
    .operationItem {
      margin-left: 6px !important;
    }
    .divider {
      margin: 0 !important;
    }
   .page {
     height: 100%;
     .left {
       height: 100%;
     }
     .right {
       height: 100%;
     }
     .functionBox {
       margin: 18px 0 12px 0;
       display: flex;
       justify-content: space-between;
     }
     .pagination {
       margin: 8px 0;
       display: flex;
       justify-content: end;
     }
   }
</style>


